<template>
	<view class="coupon-container">
		<CommonBack title="优惠券" @back="back"></CommonBack>
		<!-- 切换栏 -->
		<view class="coupon-tab">
			<u-tabs :inactiveStyle="inactiveStyle" :list="list1" @click="tabClick" lineColor="#F4F6F8"
				:activeStyle="activeStyle"></u-tabs>
		</view>
		<!-- 可使用 -->
		<view class="coupon-warp" v-show="state===0">
			<view class="warp-item c-theme-btn-w" v-for="item in 5">
				<view class="item-left">
					<view class="item-price">
						<view style="color: #FFB300;">
							<text style="font-size: 28rpx;">￥</text>
							<text style="font-size: 48rpx;">9</text>
						</view>
						<view style="font-size: 20rpx;color: #999FAD;">
							满￥18元可用
						</view>
					</view>
					<view class="mj">
						<view class="mj-title">XXX满减券</view>
						<view class="mj-time">2022-01-20 到期</view>
					</view>

				</view>
				<view class="use c-theme-btn-b">
					去使用
				</view>
			</view>
		</view>
		<!-- 已过期 -->
		<view class="coupon-warp" v-show="state===1">
			<view class="warp-item c-theme-btn-w" v-for="item in 5">
				<view class="item-left">
					<view class="item-price">
						<view style="color: #FFB300;">
							<text style="font-size: 28rpx;">￥</text>
							<text style="font-size: 48rpx;">9</text>
						</view>
						<view style="font-size: 20rpx;color: #999FAD;">
							满￥18元可用
						</view>
					</view>
					<view class="mj">
						<view class="mj-title">XXX满减券</view>
						<view class="mj-time">2022-01-20 到期</view>
					</view>
		
				</view>
				<view class="use c-theme-btn-b" style="background-color: #FFFFFF;color: #999FAD;">
					已过期
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CommonBack from "../../components/CommonBack.vue"
	export default {
		components: {
			CommonBack
		},
		data() {
			return {
				list1: [{
					name: '可使用',
				}, {
					name: '已过期',
				}],
				activeStyle: {
					color: "#3F7BED",
					fontSize: "36rpx",
					fontWeight: 'bold'
				},
				inactiveStyle: {
					color: "#999FAD",
					fontSize: "30rpx",
				},
				// 切换页面
				state:0
			};
		},
		methods: {
			back() {
				uni.switchTab({
					url: "./my"
				})
			},
			tabClick(val) {
				this.state=val.index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-container {
		padding: 100rpx 60rpx;

		.coupon-tab {
			margin: 60rpx 0;
		}

		.coupon-warp {
			.warp-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx;
				background: #FFFFFF;
				border: 2rpx solid #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-bottom: 40rpx;

				.item-left {
					display: flex;
					align-items: center;

					.item-price {
						text-align: center;
						margin-right: 20rpx;
					}

					.mj {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;

						.mj-title {
							color: #3D5464;
							font-weight: bold;
							font-size: 28rpx;
						}

						.mj-time {
							margin-top: 30rpx;
							color: #999FAD;
							font-size: 20rpx;
						}
					}
				}

				.use {
					width: 160rpx;
					height: 50rpx;
					background-color: #3F7BED;
					color: #FFFFFF;
					text-align: center;
					line-height: 50rpx;
					font-size: 20rpx;
					border-radius: 20rpx;
					border: 1px solid #FFFFFF;
				}

			}
		}
	}
</style>
